<template>
  <div style="background: ##f0f2f5; padding: 24px">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>
        <a @click="$router.push('/xkaoqin/home/ABS/HolidaySetting/HolidayType')"
          >假期类型</a
        ></a-breadcrumb-item
      >
      <a-breadcrumb-item>新建类型</a-breadcrumb-item>
    </a-breadcrumb>
    <div>
      <a-card :bordered="false">
        <a-form layout="vertical">
          <a-form-item label="假期发放规则" style="margin-bottom: 12px">
            <a-radio-group name="holidaySendRule" v-model="holidaySendRule">
              <a-radio :value="0"> 按照司龄 </a-radio>
              <a-radio :value="1"> 按照工龄 </a-radio>
              <a-radio :value="2"> 按照司龄与工龄的较大值 </a-radio>
              <a-radio :value="3"> 固定额度 </a-radio>
            </a-radio-group>
            <a-tooltip placement="top">
              <template slot="title">
                <span
                  >可在“假期管理” -
                  “假期余额”页面，对员工的工龄/司龄进行设置</span
                >
              </template>
              <p class="tip" style="width: 140px">
                <a-icon type="question-circle" />&nbsp;如何设置工龄/司龄
              </p>
            </a-tooltip>
            <div v-show="holidaySendRule === 0 || holidaySendRule === 2">
              <div
                v-for="(item, index) in silingList"
                :key="index"
                style="margin: 10px"
              >
                <!-- 第一行 -->
                <div v-if="index === 0">
                  <span>司龄&nbsp;﹤ &nbsp;</span>
                  <a-input-number
                    v-model="silingList[0].year"
                    :min="1"
                    :max="98"
                    style="width: 120px; margin-right: 5px"
                  ></a-input-number>
                  <span>&nbsp;年时，</span>
                  <span>享有&nbsp;</span>
                  <a-input-number
                    v-model="item.day"
                    :min="0"
                    :precision="1"
                    style="width: 120px; margin-right: 5px"
                  ></a-input-number>
                  <span>&nbsp;天假</span>
                </div>
                <!-- 第一行 -->
                <!-- 最后一行 -->
                <div
                  style="margin-bottom: 5px"
                  v-else-if="index === silingList.length - 1"
                >
                  <span>司龄&nbsp;≥ &nbsp;</span>
                  <a-input-number
                    v-model="silingList[index - 1].year"
                    :min="index - 2 < 0 ? 1 : silingList[index - 2].year + 1"
                    style="width: 120px; margin-right: 5px"
                  ></a-input-number>
                  <span>&nbsp;年时，</span>
                  <span>享有&nbsp;</span>
                  <a-input-number
                    v-model="item.day"
                    :min="0"
                    :precision="1"
                    style="width: 120px; margin-right: 5px"
                  ></a-input-number>
                  <span>&nbsp;天假</span>
                </div>
                <!-- 最后一行 -->
                <!--中间数据 -->
                <div v-else>
                  <span>{{ silingList[index - 1].year }}&nbsp;≤&nbsp;</span>
                  <span>司龄&nbsp;﹤ &nbsp;</span>
                  <a-input-number
                    v-model="silingList[index].year"
                    :min="
                      silingList[index - 1].year + 1 > 1
                        ? silingList[index - 1].year + 1
                        : 1
                    "
                    :max="
                      index !== silingList.length - 2
                        ? silingList[index + 1].year - 1
                        : 99
                    "
                    style="width: 120px; margin-right: 5px"
                  ></a-input-number>
                  <span>&nbsp;年时，</span>
                  <span>享有&nbsp;</span>
                  <a-input-number
                    v-model="item.day"
                    :precision="1"
                    :min="0"
                    style="width: 120px; margin-right: 5px"
                  ></a-input-number>
                  <span>&nbsp;天假</span>
                  <a-icon
                    type="delete"
                    style="margin-left: 10px"
                    @click="deleteSilingRule(index)"
                  />
                </div>
                <!--中间数据 -->
              </div>
              <a-button type="link" icon="plus" @click="addSilingRule"
                >添加规则
              </a-button>
            </div>
            <a-divider dashed v-show="holidaySendRule === 2" />
            <div v-show="holidaySendRule === 2 || holidaySendRule === 1">
              <div
                v-for="(item, index) in gonglingList"
                :key="index"
                style="margin: 10px"
              >
                <!--中间数据 -->
              </div>
              <a-button type="link" icon="plus" @click="addGonglingRule"
                >添加规则
              </a-button>
              <!-- <a style="color: #1890ff"> <a-icon type="plus" />添加规则 </a> -->
            </div>
            <p class="tip">保存成功后，此类型审批将按以上规则发放对应的假期</p>
          </a-form-item>
        </a-form>
      </a-card>
      <div class="toolBar" style="padding-left: 200px">
        <div class="footerBar">
          <a-button @click="toCancel"> 取消 </a-button>
          <a-button type="primary" style="margin-left: 10px" @click="toSubmit">
            提交
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'newHoliday',
  data () {
    return {
      userId: '',
      userName: '',
      pathName: '',
      id: 'NEW',
      holidayName: '',
      rangeApplication: '0', //整理时转Num
      applSex: 'A',//性别
      applEmplClass: ['1'],//员工类别
      empCategoryList: ['正式员工', '派遣正式', '临时劳务', '兼职劳务', '实习生', '外包'],// 员工类别数组
      deptIdList: [],
      emplIdList: [],
      entryTime: 0,
      values: {
        value: '',
        text: '',
      },
      minTime: 0,
      timeType: 0,
      hoursWorkday: 8,
      status: 0,
      xiane: 0,
      tipFlag: 0,////存放请求回来的是否限额的值
      tipFlagType: 0,//存放请求回来的发放方式的值
      isBackup: false,//是否备份当前余额
      absHolidayRules: {},//限额部分的数据
      displayonlyFlag: '',//是否只读显示标志（Y-是  N-否）
      // 按年发放
      sendTime: 0,//发放时间类型自然年和入职时间--offerType
      selectMonth: 1,//发放月
      selectDay: 1,//发放日
      isDaybyday: false,//逐日发放offerByday 0，1
      isEmploy: false,//按入职时间等比例offerByhireday 0，1
      sendType: 0,//发放方式 ruleType
      holidaySendRule: 0,//假期发放规则 offerRule
      year: 2021,
      month: 1,
      loopTimes: 0,
      // 司龄数组
      silingList: [{ year: 1, day: 2 }, { year: 2, day: 3 }, { year: 3, day: 4 }],
      // 工龄数组
      gonglingList: [{ year: 1, day: 2 }, { year: 2, day: 3 }, { year: 3, day: 4 }],
      sendDay: 0,//固定额度，发放天数
      expiryDate: 0,//有效期
      limitNum: 15,//超过有效期extendQuota
      limitNumUnit: '0',//天或月extendUnit
      // 固定失效月和日
      selectExpireMonth: 12,//expireMonth
      selectExpireDay: 31,//expireDay
      // 有效期失效数据
      expireQuota: 1,
      expireUnit: 1,//expireQuota的单位0是年，1是月
    }
  },

  watch: {
    selectExpireMonth (newVal, oldVal) {
      this.selectExpireDay = this.loopTimes
    },
    // sendDay (newVal, oldVal) {
    //   // console.log(newVal, oldVal)
    //   if (!newVal) {
    //     this.sendDay = 0
    //   }
    // },
  },
  methods: {
    changeSendTime () {
      this.selectMonth = 1
      this.selectDay = 1
    },
    changeSendDay (e) {
      let num = parseInt(e)
      if (String(e).indexOf('.') !== -1) {
        // 带小数点的四舍五入取整
        num = Math.round(e)
      }
      this.sendDay = num
    },
    // 将司龄工龄数组转化为对象数据
    setWorkAndCompanyYear (arr) {
      let workOrCompany = {}
      arr.map((item, index) => {
        if (index === arr.length - 1) {
          workOrCompany[arr[index - 1].year] = item.day
        } else {
          workOrCompany[item.year - 1] = item.day
        }
      })
      // console.log(workOrCompany)
      return workOrCompany
    },
    // 将返回的司龄和工龄数据变成silingList/gonglingList格式
    // offerAllWorkAgeQuota: {0: 2, 1: 3, 2: 4} =>
    // silingList: [{ year: 1, day: 2 }, { year: 2, day: 3 }, { year: 3, day: 4 }]
    workAndCpyObjToList (obj) {
      let workOrCompanyList = []
      for (var i in obj) {
        workOrCompanyList.push({
          year: Number(i) + 1,
          day: obj[i],
        })
      }
      // console.log(workOrCompanyList)
      return workOrCompanyList
    },
    // 按司龄添加规则
    addSilingRule () {
      this.silingList[this.silingList.length - 1].year = this.silingList[this.silingList.length - 2].year + 1

      let result = this.silingList[this.silingList.length - 1].year + 1
      let result1 = this.silingList[this.silingList.length - 1].day + 1
      this.silingList.push({ year: result, day: result1 })
    },
    // 按司龄删除规则
    deleteSilingRule (index) {
      if (this.silingList.length === 3) {
        this.silingList[0].year = this.silingList[index].year
      }
      this.silingList.splice(index, 1)
    },
    // 按工龄添加规则
    addGonglingRule () {
      // this.gonglingList[this.gonglingList.length - 1].year = this.gonglingList[this.gonglingList.length - 2].year + 1

      // let result = this.gonglingList[this.gonglingList.length - 1].year + 1
      // let result1 = this.gonglingList[this.gonglingList.length - 1].day + 1
      this.gonglingList.push({ year: 1, day: 1 })
    },
    // 按工龄删除规则
    deleteGonglingRule (index) {
      if (this.gonglingList.length === 3) {
        this.gonglingList[0].year = this.gonglingList[index].year
      }
      this.gonglingList.splice(index, 1)
    },
    backupBalance () {
      this.isBackup = !this.isBackup
    },
  },

}
</script>

<style lang="scss" scoped>
// p {
//   margin-top: 0.5em;
// }
.tip {
  color: #8f959e;
  font-size: 14px;
  line-height: 28px;
  margin: 5px 0 0 0;
}
.toolBar {
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  height: 64px;
  line-height: 64px;
  z-index: 900;
  text-align: center;
}
.footerBar {
  box-shadow: 0 -1px 2px rgb(0 0 0 / 3%);
  background: #fff;
  border-top: 1px solid #e8e8e8;
}
</style>